<!-- 详情页 -->
<template>
    <div class="cart">

      <div class="god">
        <van-icon @click="shareFn" class="add1 add" name="share-o" />
        <van-icon @click="revokeFn" class="add2 add" name="revoke" />

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          
            <van-swipe-item v-for="item in gallery" :key="item.id">
              <img :src="item.img_url" alt="">
            </van-swipe-item>
        </van-swipe>
        <p>
          <span><van-icon name="passed" /> 30天无忧退货</span>
          <span><van-icon name="passed" /> 48小时快速退款</span>
          <span><van-icon name="passed" /> 30满88包邮</span>
        </p>
        <h4>
          <p>{{infoname}}</p>
        <p>{{infogoods_brief}}</p>
          <p>￥{{sku.price}}.00元</p> 
        </h4>
        <h1>
          <h2>商品参数</h2>
          <h3 v-for="(item,index) in attribute" :key="index">
            {{item.name}}:{{item.value}}
          </h3>
        </h1>
    
      </div>
      <div class="top" v-html="html">
      
      </div>


    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon
       icon="cart-o"
        text="购物车"
         
          @click="$router.push('/cart')"
        :badge="badge"
          />
      <van-goods-action-icon icon="shop-o" text="店铺" badge="0" />
      <van-goods-action-button type="warning" text="加入购物车" @click="addclick" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
          <van-sku
          v-model="show"
          :sku="sku"
          :goods="goods"
          :goods-id="goodsId"
          :quota="quota"
          :quota-used="quotaUsed"
          :hide-stock="skuhide_stock"
      
          @buy-clicked="onBuyClicked"
          @add-cart="onAddCartClicked"
          ref="sssk"
        />
    </div>
</template>

<script>

import {getDetail} from '@/utils/https.js'
import {postCart} from '@/utils/https.js'

export default {

  data() {
    return {
      badge:0,
      productId:[],
      infoname:'',
      infogoods_brief:'',
      inforetail_price:'',
      gallery:[],
      attribute:[],
      html:'',
      show: false,
      sku: {
  
  tree: [
    
  ],
  // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
  list: [
   
  ],
  price: '1.00', // 默认价格（单位元）
  stock_num: 0, // 商品总库存
  collection_id: 0, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
  none_sku: true, // 是否无规格商品
  
 
},
      goods: {
        picture: 'https://img2.baidu.com/it/u=2803671877,3322045110&fm=26&fmt=auto',
        // 数据结构见下方文档
      },
    
      goodsId:'',
      skuhide_stock:false, // 是否显示商品库存
      quota:0, // 限购数量  0表示不限购
      quotaUsed:0,//已经购买过的数量

    };
  },
created(){
    console.log(this.$route.query);
    this.goodsId = this.$route.query.id
    console.log(this.goodsId);
    getDetail(this.$route.query).then(res =>{
        console.log(res);
        this.goods.picture = res.data.data.brand.list_pic_url
        this.sku.stock_num = res.data.data.info.goods_number
        this.sku.price = res.data.data.info.retail_price
       
        this.collection_id = this.$route.query.id
        this.html = res.data.data.info.goods_desc
        this.gallery = res.data.data.gallery
        this.attribute = res.data.data.attribute
        this.infoname = res.data.data.info.name
        this.inforetail_price = res.data.data.info.retail_price
        this.infogoods_brief = res.data.data.info.goods_brief
        //  console.log(this.infoObj.name);
        this.productId = res.data.data.productList[0].id
        console.log(this.productId);
    })

    
   

},
methods:{
   onBuyClicked(){
    
   },
   onAddCartClicked(){
     let user  = localStorage.getItem('user')
        if(user){
             console.log(222);
     this.show = false
     console.log(this.$refs.sssk.getSkuData().selectedNum);
     console.log(this.productId);
     console.log(this.$route.query);
     this.productId = stringify(this.productId)
     postCart({
  

       goodsId:this.$route.query.id,
       productId:this.productId,
       number:this.$refs.sssk.getSkuData().selectedNum
        // goodsId: this.$route.query.id, // 地址栏id
        // productId: this.productList[0].id, //产品id，在刷新页面时的数据对象下获取productList数组
        // number: this.$refs.sku.getSkuData().selectedNum, // 选中的商品数量
       }).then((res) =>{
       console.log(res);
       this.badge = res.data.data.cartTotal.goodsCount;
     })
        }else{
            this.$toast.fail('请先登录..')
            console.log(this);
            setTimeout(() =>{
                this.$router.push('/user')
            },1000)
           
        }
    

   },
   addclick(){
     this.show = true
   },
   shareFn(){
     console.log(111);
   },
   revokeFn(){
    this.$router.go(-1)
    //  this.$router.push("/home/searchpop")
     
   }
 
}
}
</script>

<style lang='less' scoped>
  .cart{
    img{
      width: 100%;
      height: 100%;
    }
    .god{
      // position: relative;
      h1{
        font-size: 16px;
        text-align: center;
      
        h3{
          
          text-align: left;
          overflow: hidden;
          background: #f5f5f5;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: calc(90% - 50px );
          margin: 5px auto;
          border-radius: 8px;
          padding-left: 50px;
        }
      }
      p{
        text-align: center;
        span{
          font-size: 16px;
          color: black;
          .van-icon{
            color: rgb(209, 47, 47);
          }
        }
      }
      h4{
        font-size: 16px;
        P{
          margin: 6px 0 ;
          color: rgba(0, 0, 0, 0.5);
        }
        p:nth-child(3){
          color: rgb(209, 47, 47);
        }
      }
      .add1{
          top: 10px;
          right: 10px;
      }
       .add2{
          top: 10px;
          left: 10px;
      }
      .add{
      position: fixed;
      color: rgb(253, 253, 253);
     
      z-index: 10;
      background: rgba(0,0,0,0.5);
      border-radius: 20px;
      font-size: 35px;
    }
    }
    
     /deep/ .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        // height: 370px;
      }
    .top{
       
      /deep/img{
        width: 100%;
      }
    }
  }
</style>